<template>
    <div>
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="全称" prop="description">
                        <el-input v-model="form.description"></el-input>
                    </el-form-item>

                    <el-form-item label="简称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="代码" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item>

                    <el-form-item label="请选择区域" label-width="80px">
                        <el-select multiple v-model="form.regions" placeholder="请选择">
                            <el-option v-for="(item, index) in regionList" :key="index" :label="item.name" :value="item.id"></el-option>
                            <!-- <el-option key="xtc" label="小天才" value="xtc"></el-option> -->
                            <!-- <el-option key="imoo" label="imoo" value="imoo"></el-option> -->
                        </el-select>
                    </el-form-item>

                    <el-form-item label="渠道状态">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">有效</el-radio>
                            <el-radio :label="0">无效</el-radio>
                            <!-- <el-radio label="小天才"></el-radio> -->
                            <!-- <el-radio label="imoo"></el-radio> -->
                        </el-radio-group>
                    </el-form-item>
                    <!-- <el-form-item label="地址" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="邮编" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="描述" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <!-- <br>
                    <br> -->

                    <!-- <el-form-item label="联系人" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="手机" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="QQ" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="微信" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <!-- <el-form-item label="Email" prop="code">
                        <el-input v-model="form.code"></el-input>
                    </el-form-item> -->

                    <el-form-item>
                        <el-button @click="handleCancel">取消</el-button>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
    name: 'AddChannelList',
    computed: {
        ...mapGetters(['tagsList'])
    },
    data() {
        return {
            rules: {
                description: [{ required: true, message: '请输入全称', trigger: 'blur' }],
                name: [{ required: true, message: '请输入全称', trigger: 'blur' }],
                code: [{ required: true, message: '请输入全称', trigger: 'blur' }]
            },
            form: {
                description: null,
                name: null,
                code: null,
                regions: [],
                status: null
            },
            regionList: []
        };
    },
    activated() {},
    // created() {
    //     if (this.$route.query.id) {
    //         // 编辑
    //         this.getDataById(this.$route.query.id);
    //     } else {
    //         // 新增
    //     }
    //     this.getRegionList();
    // },
    watch: {
        // '$route.path'(a, b) {
        //     if (a == '/channel/add' && b == '/channel/list') {
        //         if (this.$route.query.id) {
        //             // 编辑
        //             this.getDataById(this.$route.query.id);
        //         } else {
        //             // 新增
        //         }
        //         this.getRegionList();
        //     }
        // },

        $route: {
            deep: true,
            immediate: true,
            handler(a, b) {
                console.log(a, b);
                if (a.name === 'AddChannel') {
                    if (this.$route.query.id) {
                        // 编辑
                        this.getDataById(this.$route.query.id);
                    } else {
                        // 新增
                    }
                    this.getRegionList();
                }
            }
        }
    },
    methods: {
        async getDataById(channelId) {
            try {
                let url = '/channel/get';
                let { data: res } = await this.$http[4].get(url, {
                    params: this.$removeField({
                        channelId
                    })
                });
                console.log(res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                // 解构
                let { description, name, code, supportRegions, status } = res.data;

                // 中间处理
                var tempRegions = [];
                if (supportRegions && supportRegions.length > 0) {
                    for (var i = 0; i < supportRegions.length; i++) {
                        tempRegions.push(supportRegions[i].id);
                    }
                }
                // supportRegions = supportRegions.map(item => {
                //     return item.id;
                // });
                console.log(supportRegions);
                // 赋值
                this.form = {
                    description,
                    name,
                    code,
                    status,
                    regions: tempRegions
                };
                console.log(this.form);
                console.log(res);

                var lis = document.querySelectorAll('.content-box .tags ul .tags-li');
                lis = [...lis];
                var activeIndex = lis.findIndex(item => {
                    return item.classList.contains('active');
                });
                var tempArr = [...this.tagsList];
                tempArr[activeIndex].title = this.form.description;
                this.SET_TAGSLIST(tempArr);
            } catch (err) {}
        },

        ...mapMutations(['SET_TAGSLIST']),
        handleCancel() {
            this.$closeActiveTag.call(this);
            this.$router.replace({
                path: '/channel/list'
            });
        },
        async getRegionList() {
            try {
                let url = '/region/query';
                let { data: res } = await this.$http[4].get(url, {});
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                console.log(res);
                if (res.data.content && res.data.content.length > 0) {
                    this.regionList = res.data.content;
                } else {
                    this.regionList = [];
                }
            } catch (err) {
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        onSubmit() {
            this.$confirm('确定要提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    if (this.$route.query.id) {
                        this.submit('/channel/update', {
                            channelId: this.$route.query.id,
                            code: this.form.code,
                            name: this.form.name,
                            description: this.form.description,
                            status: this.form.status,
                            regions: this.form.regions
                        });
                    } else {
                        this.submit('/channel/post', {
                            code: this.form.code,
                            name: this.form.name,
                            description: this.form.description,
                            status: this.form.status,
                            regions: this.form.regions
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
        },
        async submit(url, params = {}) {
            try {
                let { data: res } = await this.$http[4].post(url, this.$objTostring(this.$removeField(params)), {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.$closeActiveTag.call(this);
                this.$router.replace({
                    path: '/channel/list'
                });
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        }
    }
};
</script>
